<template>
    <div class="QRBox">
        <span class="TT">创建你的自定义二维码</span>
        <span>输入网址</span>
        <div class="outBox">
            <input v-model="nowUrl" class="UrlI" type="text" placeholder="输入内容">
            <button type="button" class="upLoad" title="加载本地二维码">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-arrow-up-short" viewBox="0 0 16 16">
                    <path fill="white" fill-rule="evenodd" d="M8 12a.5.5 0 0 0 .5-.5V5.707l2.146 2.147a.5.5 0 0 0 .708-.708l-3-3a.5.5 0 0 0-.708 0l-3 3a.5.5 0 1 0 .708.708L7.5 5.707V11.5a.5.5 0 0 0 .5.5z"/>
                </svg>
            </button>
        </div>
        <span>参数设置</span>
        <div class="selectBox">
            <div class="XZB">
                <span class="XZT">容错率:</span>
                <Select v-model="RC" style="width:200px;height:30px;backdrop-filter: blur(var(--def-filler));background-color: var(--def-box-color);line-height:30px;">
                    <Option v-for="item in RCL" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </div>
            <!-- <div class="XZB">
                <span class="XZT">信息点样式:</span>
                <Select v-model="XXY" style="width:200px;height:30px;background-color:#3a404a;line-height:30px;">
                    <Option v-for="item in XXYL" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </div> -->
            <!-- <div class="XZB">
                <span class="XZT">信息点缩放:</span>
                <input type="text" class="Input" v-model="XXS">
            </div> -->
            <!-- <div class="XZB">
                <span class="XZT">信息点透明:</span>
                <input type="text" class="Input" v-model="XXT">
            </div> -->
            <div class="XZB">
                <span class="XZT">定位点样式:</span>
                <Select v-model="DWY" style="width:200px;height:30px;backdrop-filter: blur(var(--def-filler));background-color: var(--def-box-color);line-height:30px;">
                    <Option v-for="item in DWYL" :value="item.value" :key="item.value">{{ item.label }}</Option>
                </Select>
            </div>
            <button @click="active" class="butS">生成</button>
            
        </div>
        <span v-show="isArt == true">请输入网址</span>
        <span>保存路径为软件主目录resources下的LiveImg目录</span>
        <div class="svgBoxOne" v-show="isArt == false">
            <div v-html="svgA" class="svg"></div>
            <button @click="save" class="butS ss">保存二维码</button>
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
import { Select,Option } from "view-ui-plus";
import {
    encodeData,
    rendererFuncA,
    rendererRandRound,
    rendererLine,
    rendererRect
} from 'beautify-qrcode';
const {resolve} = require('path')
const fs = require('fs')

import { storeToRefs } from 'pinia'
import useNoiseStatistics from '../stores/index';
//获取pinia
const counterStore = useNoiseStatistics()
const { SDPath,nowPath,cmdPid,startFlg,appBZ,sessdata,XC,outGS,roomLists,likeRoomList,likeRB } = storeToRefs(counterStore)

const nowUrl = ref('')

const RC = ref(2)

const RCL = ref([
    {value: 1,label: '7%'},
    {value: 0,label: '15%'},
    {value: 3,label: '25%'},
    {value: 2,label: '30%'},
])

// const XXY = ref(0)

// const XXYL = ref([
//     {value: 0,label: '矩形'},
//     {value: 1,label: '圆形'},
//     {value: 2,label: '随机'},
// ])

// const XXS = ref('50')

// const XXT = ref('30')


const DWY = ref(0)
const nowSvg = ref()

const DWYL = ref([
    {value: 0,label: '矩形'},
    {value: 1,label: '圆形'},
    {value: 2,label: '行星'},
    {value: 3,label: '圆角矩形'},
])

//..............二维码实例
const QRS = ref()
const svgA = ref()
const isArt = ref(true)
const NNQR = ref()
onMounted(()=>{
    // console.log(resolve('./'))

})
//保存
function save(){
    if(isArt.value == false){
        nowSvg.value = counterStore.SDPath+'\\LiveImg\\svgNN'+new Date().getTime()+'.svg'
        fs.writeFileSync(nowSvg.value,svgA.value)
        // 把svg保存成图片
        // svg2png(Buffer.from(nowSvg.value), {}).then(buffer=>fs.writeFile(resolve('./')+'\\QR\\svg'+new Date().getTime()+'.svg', buffer));

    }
    
}



function active() {
    QRS.value = null
    
    QRS.value = encodeData({
        text:nowUrl.value,
        correctLevel:RC.value
    })
    if (DWY.value != 0 && nowUrl.value.length >0) {
        if(DWY.value == 1){
            svgA.value = rendererFuncA(QRS.value)
        }
        if(DWY.value == 2){
            svgA.value = rendererRandRound(QRS.value)
        }
        if(DWY.value == 3){
            svgA.value = rendererLine(encodeData({
        text:nowUrl.value,
        // type:XXY.value,
        posType:3,
        correctLevel:RC.value
            }))
        }
        isArt.value = false
    }else{
        if(nowUrl.value != ''){
            svgA.value = rendererRect(QRS.value)
            isArt.value = false
        }else{
            isArt.value = true
        }
    }
    
}
// const A2 = rendererRound(qrcode);

</script>

<style scoped>
.ss{
    /* margin: 0 !important; */
    margin: auto 30px!important;
}
.svgBoxOne{
    display:flex;

}
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
.QRBox::-webkit-scrollbar {
  width: 0;
  /* margin-top: 54px; */
  /* height: 6px; */
}
/*定义滚动条轨道*/
.QRBox::-webkit-scrollbar-track {
  background-color: transparent;
  background-color: transparent;
}
/*定义滑块 内阴影+圆角*/
.QRBox::-webkit-scrollbar-thumb {
  background-color: #30B07F;
  background-image: -webkit-linear-gradient(45deg,rgba(255,255,255,.4) 100%,transparent 100%,transparent 50%,rgba(255,255,255,.4) 50%,rgba(255,255,255,.4) 75%,transparent 75%,transparent);
}
.butS{
    border: none;
    border-radius: 2px;
    background-color: var(--def-button-color-blue);
    color: #fff;
    font-family: myFont;
    cursor: pointer;
    padding: 5px 25px;
    height: 40px;
    margin: 6px auto
}
.svg{
    width: 200px;
    height: 200px;
}
.selectBox{
    display:flex;
    flex-wrap:wrap;
}
.upLoad{
    border: none;
    border-radius: 2px;
    background-color: var(--def-box-color);
    backdrop-filter: blur(var(--def-filler));
    margin-left: 10px;
    padding: 5px 10px;
}
.UrlI{
    width: 60%;
    height:30px;
    padding:0px 10px;
    outline: none;
    border: none;
    border-radius: 2px;
    font-family: myFont;
    color:#fff;
    background-color: var(--def-box-color);
    backdrop-filter: blur(var(--def-filler));
}
.outBox{
    display: flex;
    margin:10px 0;
}
.QRBox{
    padding: 5px 15px;
    display: flex;
    color: #fff;
    flex-direction: column;
    overflow-y: auto !important;
    height: 410px;
}
.TT{
    font-size: 25px;
    margin-bottom: 5px;
}
.Input{
    border: none;
    background-color: #3a404a;
    color: #fff;
    font-family: myFont;
    font-size: 16px;
    padding: 5px 10px;
    outline: none;
}
:depp(.ivu-select,.ivu-select-single,.ivu-select-default){
    overflow: hidden;
    border-top-left-radius: 2px;
    border-top-right-radius: 2px;
}
:deep(.ivu-select-item:hover){
    background-color: #fff;
    color: #000;
}
:deep(.ivu-select-item){
    padding: 0 10px;
}
:deep(.ivu-select-selection){
    padding-left: 10px;
    max-height: 30px;
}
:deep(.ivu-select-dropdown-list){
    list-style: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}
:deep(.ivu-select-dropdown){
    background-color:#ffffff63;
    backdrop-filter: blur(var(--def-filler));
    margin: 0;
    overflow: hidden;
    border-bottom-left-radius: 2px;
    border-bottom-right-radius: 2px;
}
.XZT{
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    margin-right: 10px;
}
.XZB{
    display: flex;
    margin: 10px 15px;
}
.XZ{
    display: flex;
    padding-top: 10px;
    padding-left: 30px;
    justify-content: center;
    flex-wrap: wrap;
}
.XZs{
    display: flex;
    padding-top: 10px;
    padding-left: 50px;
    justify-content: flex-start;
    flex-wrap: wrap;
}
input::-webkit-input-placeholder {
    /* placeholder颜色  */
    color: var(--def-placeholder);
}
</style>
